================================================================================
  KARADIGM
  A coherent, minimal multi-page HTML template.
  By Luko Karavan · https://lukokaravan.com
================================================================================

  (To reuse this README for another template, only the template name "Karadigm" needs changing - the rest applies to every template.)


WHAT THIS IS
--------------------------------------------------------------------------------
Not a single page - a small design SYSTEM applied across page types, so the whole site feels like one hand made it. Plain HTML, CSS and JavaScript: no build step, no framework, no npm. Open a file in a browser and it works.

The entire look is driven by CSS custom properties ("tokens"). Change a handful of variables and the whole template re-skins - colours, spacing, type, all of it. A ready-made dark and light variant ship together.


WHAT'S INCLUDED
--------------------------------------------------------------------------------
  *.html                 The pages (index, generic, shop/product/cart, blog, blogpost, portfolio, legal, 404 - each with a -light twin).
  css/
    tokens.css           Design tokens - DARK theme  (the re-skin layer).
    tokens-light.css     Design tokens - LIGHT theme (same variable names).
    base.css             Reset, fonts, typography, rich-text elements.
    layout.css           Page skeleton: header / nav / main / footer.
    components.css       Reusable UI: buttons, callouts, cards, gallery, forms…
    print.css            PORTABLE: paper/PDF adapter (linked media="print").
    code.css             PORTABLE: syntax-highlight theme (Prism/highlight.js).
    epub.css             PORTABLE: EPUB stylesheet (pandoc … --css css/epub.css).
  themes/
    karadigm.marp.css    PORTABLE: Marp/reveal slide theme.
  tokens/
    karadigm.tokens.json PORTABLE: design tokens in DTCG format (Figma / Style Dictionary). The single source behind the CSS adapters.
  js/
    main.js              All interactivity (vanilla JS).
  assets/
    img/                 Sample images (webp).
    icons/fav/           Favicons + social share image.
    samples/             Specimen docs (PPTX/XLSX/DOCX/PDF/EPUB, dark & light).

  PORTABLE IDENTITY: the same tokens drive more than the web. Each "PORTABLE" file above is a thin adapter for another surface (print, slides, EPUB, code, Figma). Bring your own tool - no converter ships in this package.

  "generic.html" is the kitchen-sink page: it shows every element and component in one place - the best starting point to see what's available.


QUICK START
--------------------------------------------------------------------------------
  1. Open generic.html in a browser to explore everything on offer.
  2. Copy a page, swap in your own text and images, and you're building.
  3. Light theme: in the page's <head>, change the stylesheet link css/tokens.css -> css/tokens-light.css. That single swap is the ONLY difference between dark and light; base.css, layout.css and components.css are shared and theme-agnostic.


MAKING IT YOURS
--------------------------------------------------------------------------------
  • Colours / spacing / fonts / radii:  edit css/tokens.css (and the light mirror). You rarely need to touch the other CSS files.
  • Fonts are loaded from Google Fonts (a <link> in each page's <head>). Swap the families there and update --font-* in the tokens.
  • Images are .webp. Replace the samples in assets/img/ with your own and update the favicons in assets/icons/fav/.
  • Each CSS/JS file opens with a table of contents and clearly-marked sections; interactive parts note which JavaScript drives them.


BROWSER SUPPORT
--------------------------------------------------------------------------------
Modern evergreen browsers (Chrome, Edge, Firefox, Safari). Uses current CSS (custom properties, clamp(), color-mix()). No Internet Explorer support.


CREDIT
--------------------------------------------------------------------------------
Free to use, including commercially. The only ask: keep a visible credit link in your footer -

  Design: Karadigm by Luko Karavan - https://lukokaravan.com

See LICENSE.txt for the full terms (and notes on sample content and the third-party fonts / Fancybox lightbox).


--------------------------------------------------------------------------------
  Made by Luko Karavan - https://lukokaravan.com
  More templates and tools: DigiLuko.
--------------------------------------------------------------------------------
